/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="component-tree-centent-wrap">
        <div class="wrap-title">
            <lang>新增特征处理步骤</lang>
        </div>
        <div class="component-tree-centent__container">
            <div class="component-left">
                <div v-for="(item,index) in treeData"
                     :key="item.id"
                     class="component-item">
                    <div class="component-item-title"
                         @click="changeItemCollapsed(item,index)">
                        <span class="component-item-title-text">
                            <div class="component-img"
                                 :class="item.type"></div>
                            <div class="name">{{ item.title }}</div>
                        </span>
                        <span class="component-item-title-icon"
                              :class="{'collapsed': item.collapsed}">
                            <i class="icon iconfont iconnext-month"></i>
                        </span>
                    </div>
                    <!--折叠动画-->
                    <div v-show="item.collapsed"
                         class="component-item-sub-total">
                        <div 
                            v-for="(subItem,idx) in item.children" 
                            :key="idx"  
                            class="component-item-sub-title" 
                            :class="{'active':subItem.id === operateActiveId}"
                            @click="_editOperate(subItem)">
                            {{ subItem.name }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="component-right">
                <div v-if="operateActiveId"
                     class="component-right__top">
                    {{ componentName }}
                    <i id="sf-id-192"  
                       class="sfv-fieldtip  sfv-fieldtip_icon sf-comp-iconfont icon-comp-info"
                       sfv="">
                        <div class="component-tips">
                            <lang>{{ componentTips }}</lang>
                        </div>
                    </i>
                </div>
                <component 
                    :is="activeComp"
                    :ref="activeComp" />
                <empty-panel v-if="!operateActiveId"
                             :text="emptyText"
                             :small="true" />
            </div>
        </div>
        <div class="add-operate__btn">
            <sf-button-primary class="btn-primary m-r10"
                               @click.native="_submit">
                <lang>确定</lang>
            </sf-button-primary>
            <sf-button @click.native="_cancel">
                <lang>取消</lang>
            </sf-button>
        </div>
    </div> 
</template>
    
<script >
    
import {
    FEATURE_OPERATE_LIST
} from 'src/home/mod_cluster/project_manager/feature_manager/const_data';
import {isFunction} from 'src/util/typeof';
import EmptyPanel from 'src/components/empty_panel';
export default {
    components:{
        EmptyPanel
    },
    computed: {
            
    },
    data () {
        return {
            treeData:FEATURE_OPERATE_LIST,
            activeComp:'',
            operateActiveId:'',
            fieldList:[],
            timeFieldList:[],
            emptyText:_('请选择步骤'),
            componentName:'',
            componentTips:'',
            groupByKeys:'[]',
            operatorType:''
        };
    },
    computed: {
        activeRef () {
            return this.$refs[this.activeComp];
        }
    },
    methods: {
        changeItemCollapsed (item, index) {
            item.collapsed = !item.collapsed;
            this.treeData[index].collapsed = item.collapsed;
        },
        _editOperate (item) {
            this.activeComp = item.component;
            this.operateActiveId = item.id;
            this.componentName = item.name;
            this.componentTips = item.tips;
            this.operatorType = item.operatorType;

            //聚合两个算子默认会选中聚合值
            if (item.id === '06' || item.id === '08') {
                this.$nextTick(()=>{
                    this.activeRef.reset();
                });
            }
            this.$nextTick(()=>{
                this.activeRef.setFieldList(this.fieldList);
            });
         
        },
        getJsonValue () {
            let jsonValue = this.activeRef.getJsonValue();
            if (this.operateActiveId === '14' || this.operateActiveId === '15') {
                jsonValue.groupByKeys = this.groupByKeys;
            }
            let jsons = {
                params:jsonValue,
                type:this.operatorType
            };
            return jsons;
        },
        checkValid () {

            // 检测全部通过的时候，就直接返回状态值 false
            return isFunction(this.activeRef.isValid) && this.activeRef.isValid();
        },

        setJsonValue (data) {
            this.formData = Object.assign(this.formData, data);

            //需要情况报错
            this.clearInvalidMsg();
        },
        _submit () {
            this.$emit('operate-submit', this.getJsonValue());
        },
        _cancel () {
            this.$emit('operate-cancel');
        }
    }
};
</script>
    
    <style lang="less">
    .component-tree-centent-wrap{
        .wrap-title{
            height: 50px;
            line-height:50px;
            padding-left: 15px;
            border-bottom: 1px solid #ddd;
            font-size:14px;
        }
    }
    .component-tree-centent__container {
        width: 670px;
        background: #fff;
        display: flex;
        .add-operate__btn {
            border-top: 1px solid #ddd;
            padding: 8px;
            background-color: #fdfdfd;
            text-align: right;
        }
        .component-left{
            border-right:1px solid #ddd;
            width:220px;
            height: 503px;
            overflow: auto;
        }
        .component-right{
            flex: 1;
            height: 503px;
            overflow: auto;
            .component-right__top{
                font-size: 14px;
                margin: 16px 16px 10px 16px;
                padding-bottom: 10px;
                border-bottom: 1px solid #ddd;
                .sfv-fieldtip{
                    position: relative;
                    padding-right: 30px;
                    &:hover{
                        .component-tips{
                            display: block;
                        }
                    }
                    .component-tips{
                        display: none;
                        position: absolute;
                        z-index: 100;
                        background: #fff;
                        left: 27px;
                        top: -8px;
                        border: 1px solid #ddd;
                        font-size: 12px;
                        color: #495060;
                        padding: 10px;
                        width: 300px;
                        border-radius: 2px;
                    }
                }
            }
           
        }
        .component-item {
            border-bottom:1px solid #ddd;
            margin: 0 12px;
            &:last-child{
                border-bottom:none;
            }
            .component-item-title{
                display: flex;
                align-items:center;
                padding:9px 14px 7px 20px;
                justify-content: space-between;
                .component-item-title-text{
                    display: flex;
                    align-items:center;
                }
                .component-img{
                    width: 24px;
                    height: 24px;
                    margin-right: 8px;
                    &.dataSet{
                        background: url(../../img/data_set.svg) no-repeat;
                        background-size:100% 100%;
                    }
                    &.sum{
                        background: url(../../img/opr.svg) no-repeat;
                        background-size:100% 100%;
                    }
                    &.filter{
                        background: url(../../img/filter.svg) no-repeat;
                        background-size:100% 100%;
                    }
                    &.timeStamp{
                        background: url(../../img/timeStamp.svg) no-repeat;
                        background-size:100% 100%;
                    }
                    &.agg{
                        background: url(../../img/agg.svg) no-repeat;
                        background-size:100% 100%;
                    }
                    &.smooth{
                        background: url(../../img/smooth.svg) no-repeat;
                        background-size:100% 100%;
                    }
                    &.stringOpr{
                        background: url(../../img/stringOpr.svg) no-repeat;
                        background-size:100% 100%;
                    }
                    &.timeSeries{
                        background: url(../../img/timeSeries.svg) no-repeat;
                        background-size:100% 100%;
                    }
                    &.outlier{
                        background: url(../../img/outlier.svg) no-repeat;
                        background-size:100% 100%;
                    }
                }
                .name{
                    font-size: 14px;
                    color: #14161A;
                }
                &-icon {
                    transition: all 0.2s linear;
                    font-weight: bold;
                    &.collapsed {
                        transform: rotate(90deg);
                    }
                }
            }
            .component-item-sub-total{
                margin-bottom: 15px;
            }
            .component-item-sub-title{
                width: 146px;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #FFFFFF;
                border: 1px solid rgba(200,208,224,0.50);
                margin: 8px auto;
                border-radius: 24px;
                cursor: pointer;
                &.active{
                    border: 2px solid #3366FF;
                }
            }

            
        }
        .operate_form {
            .sfv-form{
                padding: 16px 16px 10px 16px;
                margin-bottom:15px;
            }
            .form__title{
                font-size: 14px;
                color: #222D3D;
                font-weight:700;
            }
            .form-item--first {
                margin-bottom: 16px;
            }
            .align-center{
                display: flex;
                align-items: center;
            }
            .sfv-form-item {
                .sfv-fieldlabel {
                    color: #5C5C5C;
                }

                .sfv-fieldlabel-left {
                    padding-left: 0;
                }
            }

            .form-item__title  {
                display: block;
                font-size: 13px;
                color: #222D3D;
                margin-bottom: 12px;
                font-weight: bold;
            }
        }
    }
    </style>
    